<template>
	<view class="bg-light"  style="height: 100%;">
		<scroll-view scroll-y="true" class="w-100" style="height:100vh">
			<view class="mx-3 bg-white flex py-4 rounded-lg">
				<view class="flex flex-column justify-center align-center w-100 border-right">
					<view class="font-sm " style="color: rgb(132, 132, 132);">
						您的总积分
					</view>
					<view class="mt-2 font-lg font-weight-bold">
						{{Remain_Points}}
					</view>
				</view>
				<view class="flex flex-column align-center w-100">
					<view class="font-sm " style="color: rgb(132, 132, 132);">
						可参与活动
					</view>
					<view class="mt-2">
						<text class="font-lg font-weight-bold text-danger" >{{Data.length}}</text><text class="font-sm">个</text> 
					</view>
				</view>
			</view>
			<!-- 进度条 -->
			<view class="bg-white mx-2 mt-3 py-3 rounded-lg">
				<timeline v-if="expire(item.End_Date)" v-for="(item,index) in Data" :key="index">
					<view class="mr-2">
						<view class="flex align-center justify-between">
							<view @click="handleActivity(item)" class="flex align-center font font-weight-bold mr-2">
								<text class="text-ellipsis">{{item.Activity_Name}}</text> 
								<uni-icons type="right" size="14"></uni-icons>
							</view>
							<view class="font-sm text-muted flex-shrink">
								可用积分:({{item.Remain_Points}}/{{item.Total_Points}})
							</view>
						</view>
						<view class="font-small text-warning py-1">{{item.Department_Name}}</view>
						<view v-if="expire(item.End_Date)" class="flex">
							<text class="font-small" style="color: rgb(236,23,17);">倒计时 </text>
							<uni-countdown update :font-size="10" splitor-color="rgb(236,23,17)" color="rgb(236,23,17)" :day="item.d" :hour="item.h" :minute="item.m" :second="item.s" ></uni-countdown>
						</view>
						<view v-else class="font-small" style="color: rgb(236,23,17);">已过期</view>
					</view>
					<!-- 活动下单商品 -->
					<view v-if="item.Children.sales_order_detail.length > 0">
						<view class="mr-2 mt-2" v-for="(i,id) in item.Children.sales_order_detail.filter((i,id)=>item.isExpand?id==0:true)" :key="id">
							<view class="flex" @click="handle(i)">
								<view class="flex-shrink overflow-hidden rounded-lg shadow" style="width: 220rpx; height: 220rpx; ">
									<image v-if="BASE_IMG" style="width: 100%;height: 100%;" :src="BASE_IMG + i.Specifications_Picture_URL" mode="scaleToFill"></image>
								</view>
								<view class="w-100 ml-2 flex flex-column justify-between">
									<view class="flex flex-column">
										<text class="font font-weight-bold text-ellipsis-2">{{i.Article_Name}}</text>										
										<view class="flex justify-between font-sm text-muted">
											<text class="text-ellipsis">{{i.Specifications_Name}}</text>
											<text class="font-sm">{{i.Sales_Unit_Price}}元</text>
										</view>
										<text class="font-sm">物流信息:{{i.Logistics_Number}}</text>
									</view>
									<view class="mb-2 flex justify-between">
										<text class="text-success font ">{{Amount(i)}}</text>
										<text class="font">×{{i.Quantity}}</text>
									</view>
								</view>
							</view>
						</view>
						<view class="w-100 flex justify-center mt-1" v-if="Data.length>5">
							<text class="font-sm text-muted">仅显示最近5条明细</text>
						</view>
						<view v-if="item.Children.sales_order_detail.length > 1" class="w-100 flex justify-center mt-1" @click="handleExpand(item)">
							<text class="font-sm text-muted">&lt;&lt; {{item.isExpand?'展 开':'收 起'}} &gt;&gt;</text>
						</view>
					</view>
					<!-- 没有活动提示用户 -->
					<view class="mr-2 mt-2 flex justify-between" v-else>
						<text class="font-sm text-muted">该部门下活动暂无活动订单</text>
						<view @click="handleActivity(item)" class="font-sm text-muted">
							<text class="text-dark">去看看</text>
							<uni-icons color="#343a40" size="14" type="right"></uni-icons>
						</view>
					</view>
				</timeline>
			</view>
		</scroll-view>
	</view>
</template>

<script>
	import { mapState,mapMutations } from 'vuex';
	import Base64 from "base-64";
	import timeline  from '@/components/tool/timeline.vue'
	import money from '@/components/tool/money.vue'
	import { generalQueryBySQLSerialNumber } from '@/api/generalBusiness.js'
	import { getUserSalesOrderDetailByActivity } from '@/api/salerOrder.js'
	import { getCountDown } from '@/static/js/DateUtil.js'
	export default {
		components:{
			timeline,
			money
		},
		data() {
			return {
				Data:[],
				Remain_Points:0,
			}
		},
		computed:{
			...mapState(['Open_ID','App_ID','BASE_IMG','Member']),
			Amount() {
			    return function (row) {
			        let Sales_Point = row.Sales_Point == 0 ? '' : row.Sales_Point + '积分';
			        let i = row.Sales_Point != 0 && row.Reality_Amount != 0 ? '+' : ''
			        let Reality_Amount = row.Reality_Amount == 0 ? '' : row.Reality_Amount + '元'
			        return Sales_Point + i + Reality_Amount
			    }
			},
			expire(){
				return function (str){
					str = str.replaceAll('-','/');
					let Now_Date = +new Date();
					let End_Date = +new Date(str);
					return 	End_Date - Now_Date > 0
				}
			}
		},
		onLoad(){
			this.getData();
		},
		methods: {
			...mapMutations(['setBASEPath','setBASEQuery']),
			async getData(){
				let Data = await getUserSalesOrderDetailByActivity({Open_ID: this.Open_ID});	
				if(Data){
					Data.forEach(item => {
						item.Children.sales_order_detail = item.Children.sales_order_detail.filter((i,id)=>id<= 4)
						let End_Date = item.End_Date.replaceAll('-','/')
						let {day,h,m,s} = getCountDown(End_Date);
						item.d = day;
						item.h = h;
						item.m = m;
						item.s = s;
						item.isExpand = true;
					})
					this.Data = Data
				}
				let Data1 = await generalQueryBySQLSerialNumber({
					SQLSerialNumber:'A_business_member_cash_points',
					Condition:Base64.encode(this.Open_ID),
					ExtensionCondition:''
				})
				this.Remain_Points = Data1[0].Remain_Points
			},
			handleExpand(item){
				item.isExpand = !item.isExpand
			},
			handleActivity(item){
				this.setBASEPath(`/${item.Page_SerialNumber}.html`);
				this.setBASEQuery({Activity_SerialNumber:item.Activity_SerialNumber,Activity_Name:item.Activity_Name});
				uni.navigateTo({
					url:'/pages/index/index'
				})
			},
			handle(item){
				uni.navigateTo({
					url:'/pages/my/myOrderDetail?salesOrder='+item.Sales_Order_SerialNumber, 
				})
			},
			async generalQueryBySQLSerialNumber(Data,callback){//通用查询表名
				callback(await generalQueryBySQLSerialNumber(Data));
			},
		}
	}
</script>

<style>

</style>
